<template>
  <el-container style="position:absolute;right:25%;left:25%;width:50%;height: 100%;background-color:#ffffff;">
    <el-main align="center">
      <div id="bottom">

        <body id="introduction">
          <div id="page">
            <div
              id="container"
              class="content clearfix"
            >
              <canvas
                width="500"
                height="500"
                id="myCanvas"
              >
                <p>Anything in here will be replaced on browsers that support the canvas element</p>
                <ul>
                  <li>
                    <h3
                      @click="pick('xueba')"
                      id="xueba"
                    >学霸</h3>
                  </li>
                  <li>
                    <h2
                      @click="pick('shuxue')"
                      id="shuxue"
                    >数学大佬</h2>
                  </li>
                  <li>
                    <a
                      @click="pick('suanfa')"
                      id="suanfa"
                    >算法</a>
                  </li>
                  <li>
                    <a
                      @click="pick('english')"
                      id="english"
                    >英语小能手</a>
                  </li>
                  <li>
                    <a
                      @click="pick('wise')"
                      id="wise"
                    >大智若愚</a>
                  </li>
                  <li>
                    <a
                      @click="pick('acmer')"
                      id="acmer"
                    >Acmer</a>
                  </li>
                  <li>
                    <a
                      @click="pick('kaggle')"
                      id="kaggle"
                    >Kaggle</a>
                  </li>
                  <li>
                    <a
                      @click="pick('logic')"
                      id="logic"
                    >逻辑推理</a>
                  </li>
                  <li>
                    <a
                      @click="pick('humor')"
                      id="humor"
                    >幽默</a>
                  </li>
                  <li>
                    <a
                      @click="pick('leader')"
                      id="leader"
                    >leadership</a>
                  </li>
                  <li>
                    <a
                      @click="pick('pacient')"
                      id="pacient"
                    >耐心</a>
                  </li>
                  <li>
                    <a
                      @click="pick('ai')"
                      id="ai"
                    >人工智能</a>
                  </li>
                  <li>
                    <a
                      href="www.baidu.com"
                      @click="alert('zz')"
                      id="cai"
                    >入门</a>
                  </li>

                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                  <li>
                    <a>学霸</a>
                  </li>
                </ul>
              </canvas>
            </div>
          </div>
        </body>
        <el-main id="main">
          <div style="display:inline-block">
            <el-input
              style="width:400px"
              id="input1"
              v-model="input"
              placeholder="请输入你想寻找的队友类型"
            ></el-input>

            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              style="height:40px;margin-left:30px;width:80px"
              @click="openFullScreen1"
              v-loading.fullscreen.lock="fullscreenLoading"
            >匹配</el-button>

          </div>
        </el-main>
      </div>
    </el-main>
  </el-container>

</template>

<script type="text/javascript">
// import '../plugins/tagcanvas/jquery.tagcanvas.js'
// $(document).ready(function () {
//   if (
//     !$('#myCanvas').tagcanvas({
//       textColour: '#212121',
//       outlineThickness: 1,
//       maxSpeed: 0.02,
//       depth: 0.75
//     })
//   ) {
//     // TagCanvas failed to load
//     $('#myCanvasContainer').hide()
//   }
//   // your other jQuery stuff here...
// })

export default {
  name: 'FindMate',
  data () {
    return {
      fullscreenLoading: false,
      input: ''
    }
  },
  methods: {
    pick () {
      // var content = document.getElementById(id).innerHTML
      console.log('zz')
      // this.input = this.input + ', ' + content
    },
    openFullScreen1 () {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 2000)
    },
    openFullScreen2 () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 2000)
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#footer {
  position: relative;
  height: 70px;
  clear: both;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
body {
  background: #ffffff;
  font: 13px/1.3 "Microsoft Yahei", "宋体";
  color: rgb(255, 253, 253);
}
#page,
#footer_inner {
  margin: 0 auto;
  width: 700px;
}
h1#logo {
  overflow: hidden;
  height: 93px;
  padding: 25px 0;
}
h1#logo a {
  display: block;
  height: 93px;
}
#container {
  margin: 0 auto;
  padding: 40px 0 0;
}
#container h2 {
  font-weight: normal;
  line-height: 28px;
}
#container p {
  padding: 10px 0;
}
.credit {
  text-align: center;
  padding: 20px 0 100px;
  font-size: 10px;
}
a,
a:visited {
  text-decoration: none;
  outline: none;
  color: #97cae6;
}
a:hover {
  text-decoration: underline;
  cursor: pointer;
}
#footer {
  background-color: #212121;
  width: 100%;
}
#footer h2 {
  font-size: 18px;
  font-weight: normal;
  height: 70px;
  line-height: 70px;
  font-family: "Microsoft Yahei";
  color: #eee;
}
#footer_inner {
  position: relative;
}
#footer a.tzine,
a.tzine:visited {
  color: rgb(255, 255, 255);
  font-size: 12px;
  line-height: 70px;
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  width: 90px;
}

#main {
  /* margin-left: 30%;
  margin-right: 30%; */
  margin-top: 50px;
}
#bottom {
  height: 700px !important;
}
/*-核心代码-*/
/* demo style */
</style>
